<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<div>
    <input id="sp" value="没有选择" style="width: 500px"></input>
    <ul>
        <li id="l1">click:鼠标单击时触发</li>
        <li id="l2">dblclick:鼠标双击时触发</li>
        <li id="l3">mouseover:鼠标指针移入时触发(当前元素和子元素都触发)</li>
        <li id="l4">mouseout:鼠标指针移出时触发(当前元素和子元素都触发)</li>
        <li id="l5">mouseenter:鼠标指针移入时触发(子元素不触发)</li>
        <li id="l6">mouseleave:鼠标移出时触发(子元素不触发)</li>
        <li>注意:mouseover/out比mouseenter/leave优先触发</li>
        <li id="l7">mousedown:当鼠标按任意按键时触发</li>
        <li id="l8">mouseup:当鼠标释放按键时触发</li>
        <li id="l9">mousemove:在元素内当鼠标指针移动时持续触发</li>
    </ul>
</div>
<script>
    var l1=document.getElementById('l1');
    var l2=document.getElementById('l2');
    var l3=document.getElementById('l3');
    var l4=document.getElementById('l4');
    var l5=document.getElementById('l5');
    var l6=document.getElementById('l6');
    var l7=document.getElementById('l7');
    var l8=document.getElementById('l8');
    var l9=document.getElementById('l9');
    var i=document.getElementById('sp')
    l1.onclick=function (){
        alert('鼠标单击触发');
        i.value='click:鼠标单击时触发';
    }
    l2.ondblclick=function (){
        alert('鼠标双击时触发');
        i.value='dblclick:鼠标双击时触发';
    }
    l3.onmouseover=function (){
        l3.style.backgroundColor='red';
        l3.style.color='white';
        i.value='mouseover:鼠标指针移入时触发'
    }
    l4.onmouseout=function (){
        l4.style.backgroundColor='blue';
        l4.style.color='orange';
        i.value='mouseout:鼠标指针移出时触发'
    }
    l5.onmouseenter=function (){
        l5.style.backgroundColor='blue';
        l5.style.color='white';
        i.value='mouseenter:鼠标指针移入时触发'
    }
    l6.onmouseleave=function (){
        l6.style.backgroundColor='red';
        l6.style.color='green';
        i.value='mouseleave:鼠标移出时触发'
    }
    l7.onmousedown=function (){
        l7.style.backgroundColor='yellow';
        l7.style.color='white';
        i.value='mousedown:当鼠标按任意按键时触发'
    }
    l8.onmouseup=function (){
        l7.style.backgroundColor='white';
        l7.style.color='black';
        i.value='mouseup:当鼠标释放按键时触发'
    }
    var a=0;
    l9.onmousemove=function (){
        ++a;
        i.value=a+':mousemove:在元素内当鼠标指针移动时持续触发'
    }

</script>
</body>
</html>